<template>
    <div class="draw-tool">
        <ul class="list tool">
            <li :class="['tool-item', { active: type === 'LineString' }]" @click="initDraw('LineString')">线条</li>
            <li :class="['tool-item', { active: type === 'Polygon' }]" @click="initDraw('Polygon')">多边形</li>
            <li :class="['tool-item', { active: type === 'Circle' }]" @click="initDraw('Circle')">圆形</li>
            <!-- <li class="tool-item" @click="initDraw('Point')">点</li> -->
        </ul>
        <ul class="list tool">
            <!-- <li class="tool-item" @click="initDraw">开始</li> -->
            <li class="tool-item" @click="cancel">后退</li>
            <li class="tool-item" @click="endDraw">停止绘制</li>
        </ul>
    </div>
</template>

<script>
import olMap from '../../util/lmap/lmap.js' // 引入地图包对象
import { mapState } from 'vuex'
export default {
    data() {
        return {
            draw: null,
            type: '',
            pointerMoveObj: null
        }
    },
    computed: {
        ...mapState({
            map: (state) => state.map
        })
    },
    methods: {
        // 初始化绘制对象
        initDraw(type) {
            if (this.type === type) {
                return
            }
            this.endDraw()
            this.type = type
            // if (this.draw && this.draw['draw']) {
            //     olMap.draw.reDraw()
            //     olMap.map.on('pointermove', this.pointerMove)
            //     return
            // }
            console.log(type)
            let style = {
                stroke: {
                    color: 'rgba(0, 0, 255, 1)',
                    width: 2
                },
                fill: {
                    color: 'rgba(0, 0, 255, .6)'
                }
            }
            // this.draw = olMap.draw.init(olMap.map, style, 'LineString')
            this.draw = olMap.draw.init(olMap.map, style, type)
            olMap.map.on('pointermove', this.pointerMove)
        },
        // 停止绘制
        endDraw() {
            if (!this.draw || this.type === '') {
                return
            }
            olMap.map.un('pointermove', this.pointerMove)
            console.log('this.draw.layer', this.draw.layer)
            olMap.draw.stopDraw(olMap.map)
            olMap.draw.clearPointerMove(this.draw.layer, this.pointerMoveObj)
            this.type = ''
        },
        // 撤销上一次绘制
        cancel() {
            if (!this.draw) {
                return
            }
            olMap.draw.clearbrfeforeDraw()
        },
        // 绘制鼠标跟随点
        pointerMove(e) {
            let lonlat = olMap.utils.transform(olMap.utils.mousePageLonlat(e), true)
            let style = {
                stroke: {
                    color: '#0055ff',
                    width: 2
                },
                fill: {
                    color: 'rgba(85, 255, 0, 0.6)'
                }
            }
            this.pointerMoveObj = olMap.draw.pointerMove(this.draw.layer, lonlat)
        }
    },
    mounted() {}
}
</script>

<style scoped lang="less">
.list {
    .tool-item {
        // flex: 1;
        width: 80px;
        font-size: 16px;
    }
}
</style>
